<template>
  <div>
    <top-data></top-data>
    <div class="shopCar w">
      <div class="shopCar-kong" v-if="shopCartLists.length == 0">
        <div class="pic">
          <img src="../assets/img/shopcar.png" width="100%" alt="" />
        </div>
        <div class="txts">
          <p>您的购物车是空的</p>
        </div>
        <div class="btn">
          <router-link to="/homeView" tag="button">去逛逛</router-link>
        </div>
      </div>

      <div class="shopCar-son" v-if="shopCartLists.length != 0">
        <div class="shopCar-header">
          <p><input type="checkbox" v-model="toggleAll" /> &nbsp; 全选</p>
          <p>商品</p>
          <p>单价</p>
          <p>数量</p>
          <p>小计</p>
          <p>操作</p>
        </div>

        <div class="shopCar-content">
          <div
            class="content-content"
            v-for="(item, index) in shopCartLists"
            :key="index"
          >
            <div class="singleChoice">
              <input type="checkbox" v-model="item.check" />
            </div>
            <div class="shopCar-commodity">
              <div class="shopCar-pic">
                <img :src="item.imageUrl" width="100%" alt="" />
              </div>
              <div class="shopCar-xinxi">
                <p>{{ item.name }}{{ item.text }}</p>
                <p>{{ item.color }}</p>
                <p>{{ item.activity }}</p>
              </div>
            </div>
            <div class="unitPrice">
              <p>￥ {{ item.originalPrice }}.00</p>
              <p>￥ {{ item.presentPrice }}.00</p>
            </div>
            <div class="shopCar-quantity">
              <div class="quantity-son">
                <span
                  :style="
                    item.nums > 1 ? { color: '#999' } : { color: 'black' }
                  "
                  @click="jian(index)"
                  >-</span
                >
                <input type="text" :value="item.nums" />
                <span @click="jia(index)">+</span>
              </div>
            </div>
            <div class="subtotal">
              <p>￥ {{ item.nums * item.originalPrice }}.00</p>
            </div>
            <div class="operation" @click="del(item.id)">删除</div>
          </div>
        </div>

        <div class="shopCar-foot">
          <div class="jishu">
            共<span>{{ shopCartLists.length }}</span
            >件商品，已选择<span>{{ jishu }}</span
            >件
          </div>
          <div class="foot-right">
            <div class="totalPrice">
              <span>总计:</span>
              <span>￥{{ totalPrice }}.00</span>
            </div>
            <div class="payment">
              <el-button :plain="true" @click="placeAnOrder">去下单</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="commodity w">
      <p>猜你喜欢</p>
      <ul>
        <li
          v-for="(item, index) in commodityList"
          :key="index"
          @click="toDetails(item.id)"
        >
          <div class="pic">
            <img :src="item.imageUrl" width="280" height="280" alt="" />
          </div>
          <div class="introduce">
            <h4>{{ item.name }}</h4>
            <p>{{ item.text }}</p>
            <p>
              <span>¥{{ item.presentPrice }}</span>
              <span>¥{{ item.originalPrice }}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>

    <foot-data></foot-data>
  </div>
</template>

<script>
import topData from "@/components/topData.vue";
import FootData from "@/components/footData.vue";
export default {
  data() {
    return {
      commodityList: null,
      shopCartLists: [],
      placeLists: [],
      dindanList: [],
    };
  },
  methods: {
    toDetails(id) {
      this.$router.push({
        path: "detailsView",
        query: {
          id,
        },
      });
    },
    jian(index) {
      if (this.shopCartLists[index].nums > 1) {
        this.shopCartLists[index].nums -= 1;
      }
    },
    jia(index) {
      this.shopCartLists[index].nums += 1;
    },
    del(id) {
      let index = this.shopCartLists.findIndex((item) => item.id == id);
      this.shopCartLists.splice(index, 1);
      if (this.shopCartLists.length == 0) {
        this.shopCartLists = [];
      }
      window.localStorage.setItem(
        "shopCartLists",
        JSON.stringify(this.shopCartLists)
      );
    },

    placeAnOrder() {
      this.placeLists = this.shopCartLists.filter((item) => {
        return item.check;
      });

      if (this.placeLists.length == 0) {
        this.$message({
          message: "您没有选择商品哦",
          type: "warning",
        });
      } else {
        window.localStorage.setItem(
          "placeLists",
          JSON.stringify(this.placeLists)
        );
        window.localStorage.setItem("zongjia", JSON.stringify(this.totalPrice));

        // 获取单号
        var danghao = "487";
        for (var i = 0; i <= 7; i++) {
          danghao += Math.floor(Math.random() * 10);
        }
        //获取时间
        var date =
          new Date().getFullYear() +
          "年" +
          new Date().getMonth() +
          "月" +
          new Date().getDate() +
          "日 " +
          new Date().getHours() +
          ":" +
          new Date().getMinutes();

        let danhao = {
          shoujianr: "",
          times: date,
          danghao: danghao,
          state: "待支付",
          totalPrice: this.totalPrice,
        };

        // 保存订单
        this.dindanList.unshift({
          id: +new Date(),
          dindantou: danhao,
          dindannei: this.placeLists,
        });
        window.localStorage.setItem(
          "dindanList",
          JSON.stringify(this.dindanList)
        );

        // 跳转到支付页
        this.$router.push("/paymentView");

        // 保留不购买的商品
        this.shopCartLists = this.shopCartLists.filter((item) => {
          return !item.check;
        });
        if (this.shopCartLists.length == 0) {
          this.shopCartLists = [];
        }

        window.localStorage.setItem(
          "shopCartLists",
          JSON.stringify(this.shopCartLists)
        );
      }
    },

    commodityLists() {
      this.$http({
        url: "./json/commodity.json",
        methods: "get",
      }).then((data) => {
        this.commodityList = data.data.commodityList;
      });
    },
  },

  computed: {
    toggleAll: {
      get() {
        return this.shopCartLists.every((item) => {
          return item.check;
        });
      },
      set(value) {
        this.shopCartLists.forEach((item) => {
          item.check = value;
        });
      },
    },

    totalPrice() {
      let zongjia = 0;
      this.shopCartLists.forEach((item) => {
        if (item.check) {
          zongjia += item.originalPrice * item.nums;
        }
      });
      return zongjia;
    },

    jishu() {
      let jishus = this.shopCartLists.length;
      this.shopCartLists.forEach((item) => {
        if (item.check != true) {
          jishus -= 1;
        }
      });
      return jishus;
    },
  },

  created() {
    this.commodityLists()

    if (localStorage.shopCartLists) {
      this.shopCartLists = JSON.parse(
        window.localStorage.getItem("shopCartLists")
      );
    } else {
      this.shopCartLists = [];
    }

    if (localStorage.dindanList) {
      this.dindanList = JSON.parse(window.localStorage.getItem("dindanList"));
    }
  },

  destroyed() {
    window.localStorage.setItem(
      "shopCartLists",
      JSON.stringify(this.shopCartLists)
    );
  },

  components: { topData, FootData },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/public.scss";
@import "../assets/css/shopCar.scss";
</style>